import React, { useState } from 'react';
import { Table } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';

type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];

interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}

const columns: TableColumnsType<DataType> = [
    {
        title: 'Name',
        dataIndex: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];


const App: React.FC = () => {


    const [selectedRowKeys, setSelectedRowKeys] = useState([])


    const onSelectChange = (newSelectedRowKeys:React.Key[])=>{
        setSelectedRowKeys(newSelectedRowKeys)
    }

    const dataSource = Array.from({length:20}).map((item,index)=>{
        return {
            key: index,
            name: "name"+index,
            age: "age"+index,
            address: "address"+index
        }
    })

    const rowSelection:TableRowSelection<DataType> ={
        selectedRowKeys,
        onChange:onSelectChange,
        selections:[
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
            {
                key:"odd",
                text:"select odd row",
                onSelect:(changeableRowKeys)=>{
                    let newSelectedRowKeys = changeableRowKeys.filter((_,index)=>{
                        if (index % 2 !==0){
                            return false
                        }
                        return true
                    })

                    setSelectedRowKeys(newSelectedRowKeys)
                }
            }
        ]
    }




    // const dataSource =


    return (
       <Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource}></Table>
    )

};

export default App;
